<template>
  <div id="goodsChildren">
    <div class="goods-category">
      <div class="top-title">
        <div class="inner">
          <span>坚果</span>
        </div>
      </div>
      <div class="bottom-goods_list">
        <div class="goods-brand" v-for="item in goodsInfoList" :key="item.id" @click="goGoodsDetail(item.id)">
          <div class="brand-img">
            <img :src="item.image" alt />
          </div>
          <p>{{item.name}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      goodsInfoList:[]
    };
  },
  methods: {
    //去商品详情页
    goGoodsDetail(id) {
        this.$router.push(`/goodsdetails/${id}`);
    },
    //获取后台商品数据
    getGoodsInfo(){
      this.$http.get("http://172.20.10.4:5000/getGoodsInfo").then(r=>{
        let data = r.body.data;
        this.goodsInfoList = data;
      })
    }
  },
  created(){
      this.getGoodsInfo();
  }
};
</script>
<style lang="less" scoped>
#goodsChildren {
  width: 100%;
  .goods-category {
    .top-title {
      width: 100%;
      height: 1.3rem;
      padding-top: 0.6rem;
      .inner {
        width: 1.85rem;
        height: 0.5rem;
        border-top: 0.01rem solid #1c201f;
        margin: 0 auto;
        position: relative;
        span {
          font-size: 0.24rem;
          color: #1c201f;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          background: #f4f4f4;
          top: -0.2rem;
          font-weight: 700;
          padding: 0 0.1rem;
        }
      }
    }
    .bottom-goods_list {
      width: 100%;
      padding-left: 0.2rem;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      .goods-brand {
        width: 33%;
        background-color: #fff;
        .brand-img {
          height: 1.7rem;
          width: 100%;
          padding: 0.1rem;
          img {
            width: 100%;
            height: 100%;
          }
        }
        p {
          margin-bottom: 0;
          text-align: center;
          font-size: 0.24rem;
          color: #1c201f;
          padding: 0.2rem 0;
        }
      }
    }
  }
}
</style>
